import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import path from 'path'

import tailwindcss from 'tailwindcss'
import postcsspxtoviewport from 'postcss-px-to-viewport'

export default defineConfig({
  base: process.env.NODE_ENV === 'production' ? './' : '/',
  define: {
    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'true'
  },
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver()]
    })
  ],
  css: {
    postcss: {
      plugins: [
        tailwindcss,
        postcsspxtoviewport({
          unitToConvert: 'px', // 要转化的单位
          viewportWidth: 1920, // UI设计稿的大小
          // viewportHeight: 1080, // 视窗的高度
          unitPrecision: 6, // 转换后的精度
          viewportUnit: 'vw', // 转换后的单位
          fontViewportUnit: 'vw', // 字体转换后的单位
          propList: ['*', '!line-height', '!height', '!min-height', '!max-height', '!top', '!bottom', '!margin-top', '!margin-bottom', '!padding-top', '!padding-bottom', '!border-top', '!border-bottom'], // 能转换的属性，*表示所有属性，!border表示border不转
          selectorBlackList: [], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 最小转换的值，小于等于1不转
          mediaQuery: false, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          exclude: [], // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
          include: [], // 包含那些文件或者特定文件
          landscape: false // 是否处理横屏情况

          // // 新增配置
          // landscapeUnit: 'vh',
          // landscapeWidth: 1080
        }),

        // 添加一个新的实例来处理高度相关的转换
        postcsspxtoviewport({
          unitToConvert: 'px',
          viewportWidth: 1080, // 使用视口高度作为基准
          unitPrecision: 6,
          viewportUnit: 'vh',
          fontViewportUnit: 'vh',
          propList: ['height', 'line-height', 'min-height', 'max-height', 'top', 'bottom', 'margin-top', 'margin-bottom', 'padding-top', 'padding-bottom', 'border-top', 'border-bottom'], // 只转换高度相关的属性
          selectorBlackList: [],
          minPixelValue: 1,
          mediaQuery: false,
          replace: true,
          exclude: [],
          include: [],
          landscape: false
        })
      ]
    }
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      three: path.resolve(__dirname, 'packages/src/Three.js')
    }
  },
  build: {
    assetsDir: 'src'
  },
  server: {
    hmr: true,
    host: '0.0.0.0',
    port: 8006,
    proxy: {
      '/comzen1': {
        target: 'http://192.168.1.48:9008',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/comzen1/, '')
      },
      '/comzen2': {
        target: 'http://172.168.21.45:8080/collect_java',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/comzen2/, '')
      },
      '/comzen3': {
        target: 'ws://172.168.21.45:8080/collect_java/collect',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/comzen3/, '')
      }
    }
  },
  esbuild: {
    drop: ['console', 'debugger']// 打包去除
  }
})
